<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
  <script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
  <script src="${pageContext.request.contextPath}/layui/lay/modules/layer.js"></script>
  <script src="${pageContext.request.contextPath}/layui/lay/modules/table.js"></script>
  <script src="${pageContext.request.contextPath}/layui/lay/modules/form.js"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>数据统计</li>
    <li>厂商采购统计</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">所属区域</label>
      <div class="layui-input-inline" >
        <select name="province" id="province" lay-filter="province">
          <option value="0">请选择省份</option>
        </select>
      </div>
      <div class="layui-input-inline" >
        <select name="city" id="city" lay-filter="city">
          <option value="0">请选择城市</option>
        </select>
      </div>
      <label class="layui-form-label">厂商名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" id="name" class="layui-input" >
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">采购时间</label>
      <div class="layui-input-inline">
        <input type="date" name="start_time" id="start_time" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline">
        <input type="date" name="end_time" id="end_time" autocomplete="off" class="layui-input" >
      </div>
      <div class="layui-btn-container">
        <button type="button" class="layui-btn btn-search"><i class="layui-icon">&#xe615;</i>查询</button>
      </div>
    </div>
  </form>
  <table id="PurchaseTable" lay-filter="PurchaseTable"></table>
</div>
<script>
  layui.use(['table', 'form','laydate'], function () {
    var table = layui.table,
            form = layui.form,
            util = layui.util,
            laydate = layui.laydate,
            $ = layui.jquery;
    laydate.render({ //开始时间
      elem: '#start_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date(value).getTime();
        var endTime = new Date($('#end_time').val()).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#start_time').val('');
        }
      }
    });
    laydate.render({ //结束时间
      elem: '#end_time',
      format: 'yyyy-MM-dd',
      done: function (value, date, endDate) {
        var startDate = new Date($('#start_time').val()).getTime();
        var endTime = new Date(value).getTime();
        if (endTime < startDate) {
          layer.msg('结束时间不能小于开始时间');
          $('#end_time').val('');
        }
      }
    });
    form.render();
    $.ajax({
      url: "/region/provice",
      type: "post",
      dataType: "json",
      success: function(data) {
        var json = eval("("+data+")");

        //使用循环遍历，给下拉列表赋值
        $("#province").empty();
        $("#province").append(new Option("请选择省份","0"))
        for(var i=0;i<json.length;i++){
          $("#province").append('<option value="'+json[i].name+'">'+json[i].name+'</option>');
        }
        form.render("select")//重新渲染 固定写法
      }
    });
//省份城市联动
    form.on('select(province)',function (data) {
      var pname=data.value;
      if(pname==''){
        $('#city').empty();
        $('#city').append('<option value="">请选择城市</option>');
      }else{
        $('#city').empty();
        $('#city').append('<option value="">请选择城市</option>');
        $.ajax({
          url: '/region/city?pname='+pname,
          type: 'post',
          data: 'pname='+pname,
          //dataType: 'json',
          //contentType:"application/json",
          success: function (resps) {
            layui.$('#city').empty();
            layui.$('#city').append('<option value="">请选择城市</option>');
            var json=JSON.parse(resps);
            var jsonList=eval("("+json+")");
            for(var i=0;i<jsonList.length;i++) {
              var name=jsonList[i].cName;
              layui.$('#city').append(
                      '<option value="'+name+'">'+name+'</option>'
              );
            }
            layui.form.render();
          },
          error: function () {
            layer.closeAll('loading');
            layer.msg('系统错误，请联系管理员', {icon: 5});
          }
        });
      }
      form.render();
    });
    //第一个实例
    table.render({
      elem: '#PurchaseTable'
      , height: 400
      , url: '/PurchaseOrder/getCountList' //数据接口
      , cols: [[ //表头
        {field: 'id', title: '序号', width: 100, fixed: 'left', align: "center",type:"numbers"}
        , {field: 'name', title: '厂商名称', width: 200, sort: true, align: "center"}
        , {field: 'userPerson', title: '负责人', width: 200, align: "center"}
        , {field: 'area', title: '所属区域', width: 220, align: "center",
          templet:function(res){
            return res.province+res.city;
          }
        }
        , {field: 'num', title: '采购单数量', width: 220, align: "center"}
        , {field: 'amount', title: '金额', width: 220, align: "center",
          templet:function(res){
            return "￥"+res.amount;
          }}
        , {title: '采购单明细', width: 150, toolbar: '#barDemo', align: "center"}
      ]]
      , page: true //开启分页
      , limit: 5 //默认分页条数
      , limits: [10, 20, 30] //自定义分页数据选项
      , id: 'PurchaseTable', //用于绑定模糊查询条件等等
      done: function () {
        table.resize('PurchaseTable');
      }
    });
    //查询
    $('.btn-search').on('click', function () {
      var province = $('#province').val();
      var city = $('#city').val();
      var name = $('#name').val();
      var start_time = $('#start_time').val();
      var end_time = $('#end_time').val();
      table.reload('PurchaseTable', {
        url: '/PurchaseOrder/getCountList',
        method: 'post',
        dataType: 'json',
        where: { //设定异步数据接口的额外参数，任意设
          number: name,
          province: province,
          city: city,
          start_time: start_time,
          end_time: end_time
        },
        page: {
          curr: 1 //重新从第 1 页开始
        }
      });
    });
    form.render();
    //工具条事件
    table.on('tool(PurchaseTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'detail') {
        json = JSON.stringify(data);
        layui.use('layer', function () {
          layer.open({
            type: 2,
            shift: 2,
            title: '查看信息',
            area: ['1200px', '750px'],
            closeBtn: 1,
            shadeClose: false,
            content: 'purchase/statistics/statisticsView.jsp',
            cancel: function () {
              layer.closeAll()
              $('.btn-search').click();
            }
          });
        });
      }
    });
  });
</script>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
</script>
</body>
</html>
